<template>
  <div class="container">
    <div class="head">
      <!-- 增加 -->
      <el-button
        class="add"
        icon="el-icon-circle-plus-outline"
        type="primary"
        @click="dialogFormVisible = true"
        >增加</el-button
      >
      <el-input
        placeholder="请输入查询内容"
        v-model="searchInput"
        clearable
        style="width: 200px"
      >
      </el-input>
      <el-dialog title="增加门店" :visible.sync="dialogFormVisible">
        <el-form :model="form" :rules="rules" ref="form">
          <el-form-item label="门店名" :label-width="formLabelWidth">
            <el-input v-model="form.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="电话" :label-width="formLabelWidth" prop="phone">
            <el-input v-model="form.phone" autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item
            class="alltime"
            label="营业时间"
            :label-width="formLabelWidth"
          >
            <!-- <span class="time">营业时间：</span> -->
            <el-time-picker
              is-range
              @change="getSTime"
              format="HH:mm"
              value-format="HH:mm"
              v-model="form.time"
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              placeholder="选择时间范围"
            >
            </el-time-picker>
          </el-form-item>

          <el-form-item label="地址" :label-width="formLabelWidth">
            <el-input v-model="form.address" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="描述" :label-width="formLabelWidth">
            <el-input
              v-model="form.describe"
              autocomplete="off"
              type="textarea"
            ></el-input>
          </el-form-item>
          <el-form-item label="服务" :label-width="formLabelWidth">
            <el-select v-model="form.isService" placeholder="不开通服务">
              <el-option label="开通服务" value="1"></el-option>
              <el-option label="不开通服务" value="0"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <span @click="addhandel" style="margin-right: 15px">
            <el-button type="primary" @click="dialogFormVisible = false">
              确 定
            </el-button>
          </span>
          <el-button @click="dialogFormVisible = false">取 消</el-button>
        </div>
      </el-dialog>
    </div>
    <el-table
      :data="
        shopDoorArr
          .filter(
            (data) =>
              !this.searchInput ||
              data.name
                .toLowerCase()
                .includes(this.searchInput.toLowerCase()) ||
              data.phone
                .toLowerCase()
                .includes(this.searchInput.toLowerCase()) ||
              data.time
                .toLowerCase()
                .includes(this.searchInput.toLowerCase()) ||
              data.address
                .toLowerCase()
                .includes(this.searchInput.toLowerCase())
          )
          .slice((currentPage - 1) * pageSize, currentPage * pageSize)
      "
      border
      style="width: 100%"
    >
      <el-table-column fixed prop="name" label="门店名" align="center">
      </el-table-column>
      <el-table-column prop="phone" label="电话" align="center">
      </el-table-column>
      <el-table-column prop="time" label="营业时间" align="center">
      </el-table-column>
      <el-table-column prop="address" label="地址" align="center">
      </el-table-column>
      <el-table-column prop="describe" label="介绍" align="center">
      </el-table-column>
      <el-table-column label="门店状态" align="center">
        <template>
          <el-button size="small" type="success">已通过</el-button>
        </template>
      </el-table-column>
      <el-table-column label="添加商品" align="center">
        <template slot-scope="scope">
          <div @click="shopIdbnt(scope)">
            <el-button
              size="small"
              type="primary"
              @click="dialogFormCommodity = true"
            >
              添加
            </el-button>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="添加服务" align="center">
        <template slot-scope="scope">
          <div @click="serviceIdbnt(scope)">
            <el-button
              size="small"
              type="primary"
              @click="dialogFormservice = true"
            >
              添加
            </el-button>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="145">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="primary" size="small"
            >修改</el-button
          >
          <el-button size="small" type="danger" @click="deleteHandel(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="block">
      <el-pagination
        background
        @size-change="handelSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="pageSize"
        layout=" sizes, prev, pager, next, jumper"
        :total="shopDoorList.length"
      >
      </el-pagination>
    </div>
    <el-dialog title="增加商品" :visible.sync="dialogFormCommodity">
      <el-table
        class="table"
        ref="multipleTable"
        :data="commodityList"
        tooltip-effect="dark"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection"> </el-table-column>
        <el-table-column label="日期">
          <template slot-scope="scope">{{ scope.row.date }}</template>
        </el-table-column>
        <el-table-column prop="name" label="商品名"> </el-table-column>
      </el-table>
      <div style="margin-top: 20px">
        <el-button @click="toggleSelection()">取消选择</el-button>
      </div>
      <div class="dialog-footer dddd">
        <el-button @click="dialogFormCommodity = false">取 消</el-button>
        <div @click="addCommodityHandel" class="surebnt">
          <el-button type="primary" @click="dialogFormCommodity = false">
            确 定
          </el-button>
        </div>
      </div>
      <h1 class="haveadd">{{ eventhave.name }}</h1>
      <el-table :data="eventhave.commoditys" border>
        <el-table-column fixed prop="name" label="商品名"> </el-table-column>
        <el-table-column prop="type" label="类型"> </el-table-column>
        <el-table-column prop="price" label="单价"> </el-table-column>
        <el-table-column prop="describe" label="介绍"> </el-table-column>
        <el-table-column label="商品状态">
          <template>
            <el-button size="small" type="success">已添加</el-button>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="small"
              type="danger"
              @click="commoditydeleteHandel(scope)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <el-dialog title="增加服务" :visible.sync="dialogFormservice">
      <el-table
        class="table"
        ref="multipleTable"
        :data="serviceList.rows"
        tooltip-effect="dark"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection"> </el-table-column>

        <el-table-column prop="name" label="服务名"> </el-table-column>
        <el-table-column prop="describe" label="介绍"> </el-table-column>
      </el-table>
      <div style="margin-top: 20px">
        <el-button @click="toggleSelection()">取消选择</el-button>
      </div>
      <div class="dialog-footer dddd">
        <el-button @click="dialogFormservice = false">取 消</el-button>
        <div @click="addserviceHandel" class="surebnt">
          <el-button type="primary" @click="dialogFormCommodity = false">
            确 定
          </el-button>
        </div>
      </div>
      <h1 class="haveadd">{{ seventhave.name }}</h1>
      <el-table :data="seventhave.services" border>
        <el-table-column fixed prop="name" label="服务名"> </el-table-column>
        <el-table-column prop="type" label="类型"> </el-table-column>
        <el-table-column prop="price" label="单价"> </el-table-column>
        <el-table-column prop="describe" label="介绍"> </el-table-column>
        <el-table-column label="服务状态">
          <template>
            <el-button size="small" type="success">已添加</el-button>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="small"
              type="danger"
              @click="servicedeleteHandel(scope)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import service from "../../utils/request";
export default {
  data() {
    var checkPhone = (rule, value, callback) => {
      const phoneReg = /^1[3|4|5|7|8][0-9]{9}$/;
      if (!value) {
        return callback(new Error("电话号码不能为空"));
      }
      setTimeout(() => {
        // Number.isInteger是es6验证数字是否为整数的方法,但是我实际用的时候输入的数字总是识别成字符串
        // 所以我就在前面加了一个+实现隐式转换

        if (!Number.isInteger(+value)) {
          callback(new Error("请输入数字值"));
        } else {
          if (phoneReg.test(value)) {
            callback();
          } else {
            callback(new Error("电话号码格式不正确"));
          }
        }
      }, 100);
    };

    return {
      rules: {
        phone: [{ validator: checkPhone, trigger: "blur" }],
      },

      shopDoorArr: [], // 定义的门店数组（装对应的门店）
      commodityArr: [], // 商品
      serviceArr: [], // 服务
      dialogFormservice: false,
      eventhave: {},
      seventhave: {},
      serviceeventhave: {},
      dialogFormCommodity: false,
      dialogFormVisible: false,
      multipleSelection: [],
      searchInput: "",
      currentPage: 1,
      pageSize: 5,
      total: 0,
      adminId: localStorage.getItem("adminId"), // 当前管理员的id
      form: {
        name: "",
        phone: "",
        score: "",
        time: "",
        address: "",
        describe: "",
        isService: null,
        adminId: localStorage.getItem("adminId"), // 将当前门店管理员的id添加进去
      },
      formLabelWidth: "120px",
    };
  },
  computed: {
    shopDoorList() {
      return this.$store.getters["shopDoor/shopDoorgetter"];
    },
    commodityList() {
      return this.$store.getters["commoditys/commoditysgetter"];
    },
    serviceList() {
      return this.$store.getters["service/getServiceList"];
    },
  },
  mounted() {
    // 门店渲染
    let oneShopDoor = this.shopDoorList.filter((item) => {
      return item.adminId._id == this.adminId;
    });
    this.shopDoorArr = oneShopDoor; // 将筛选出的对应的门店赋值给数组
    this.$store.dispatch("shopDoor/shopDoorAction").then(() => {
      service.get("/shopDoors").then((res) => {
        this.shopDoorArr = res.rows
          .filter((item) => {
            return item.adminId;
          })
          .filter((item) => item.adminId._id == this.adminId);
      });
    });
    // 商品
    this.$store.dispatch("commoditys/commoditysAction");
    // 服务
    this.$store.dispatch("service/getServiceAction");
  },

  methods: {
    handelSizeChange(val) {
      this.currentPage = 1;
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
    },
    handleClick(scope) {
      this.$router.push({
        path: `./shopDoorDetail/${scope._id}`,
        query: { scope: scope },
      });
    },
    deleteHandel(scope) {
      this.$store
        .dispatch("shopDoor/deleteShopDoorAction", scope._id)
        .then(() => {
          service.get("/shopDoors").then((res) => {
            this.shopDoorArr = res.rows
              .filter((item) => {
                return item.adminId;
              })
              .filter((item) => item.adminId._id == this.adminId);
          });
          return this.$route.meta.showZj;
        });
    },
    getSTime(val) {
      let str = `${val[0]}-${val[1]}`;
      this.form.time = str;
    },

    addhandel() {
      this.$store.dispatch("shopDoor/addShopDoorAction", this.form);
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    shopIdbnt(scope) {
      this.eventhave = scope.row;
    },
    serviceIdbnt(scope) {
      this.seventhave = scope.row;
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    addCommodityHandel() {
      let result = this.multipleSelection.map((item) => {
        return item._id;
      });
      this.eventhave.commoditys = this.eventhave.commoditys.concat(result);
      this.$store.dispatch(
        "shopDoor/updateShopDoorCommodityAction",
        this.eventhave
      );
    },
    addserviceHandel() {
      let result = this.multipleSelection.map((item) => {
        return item._id;
      });
      this.seventhave.services = this.seventhave.services.concat(result);
      this.$store.dispatch(
        "service/updateShopDoorserviceAction",
        this.seventhave
      );
    },
    commoditydeleteHandel(scope) {
      this.eventhave.commoditys = this.eventhave.commoditys.filter((item) => {
        return item._id != scope.row._id;
      });
      this.$store.dispatch(
        "shopDoor/updateShopDoorCommodityAction",
        this.eventhave
      );
    },
    servicedeleteHandel(scope) {
      this.eventhave.services = this.eventhave.services.filter((item) => {
        return item._id != scope.row._id;
      });
      this.$store.dispatch(
        "service/updateShopDoorserviceAction",
        this.seventhave
      );
    },
  },
};
</script>
<style scoped>
.container {
  padding: 0 20px;
}
.head {
  display: flex;
  align-content: center;
  margin-bottom: 30px;
  margin-top: 30px;
}
.add {
  margin-right: 20px;
}
.table {
  margin: auto;
  text-align: center;
}
.dddd {
  display: flex;
  float: right;
  margin-top: -40px;
}
.surebnt {
  margin-left: 20px;
}
.haveadd {
  margin-top: 40px;
}

.bntadd {
  display: flex;
  float: right;
  margin-top: -50px;
}
.right {
  margin-left: 30px;
}
。time {
  color: #606266;

  box-sizing: border-box;
}
/* 分页 */
.container .el-pagination {
  margin: 20px 0;
}
</style>



